<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="lib/bulma.min.css">
  <style>
    .box {
      width: 1200px;
      margin: 0 auto;
    }

    .num {
      width: 100px;
    }
  </style>
</head>

<body>
  <!-- 
    1. 循环渲染数据
    2. 商品加个保留2位小数
    3. 按钮改变数量++ -- （选做）
    4. 商品小计改变价格（选做）
    5. 删除（选做）

    了解：什么是MVVM，什么是双向数据绑定，渐进式和声明式
  -->
  <div id="app">
    <div class="box">
      <table class="table">
        <thead>
          <tr>
            <th></th>
            <th>商品图片</th>
            <th>商品介绍</th>
            <th>商品价格</th>
            <th>商品数量</th>
            <th>商品小计</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for=" (item ,index) in arr">
            <td><input type="checkbox" v-bind:checked="item.flag"></td>
            <td><img width="80" height="80" v-bind:src="item.img_big_logo" />
            </td>
            <td>
              <p style="width: 550px;">{{item.title }}</p>
            </td>
            <td>￥ {{Number(item.price).toFixed(2)}}</td>
            <td>
              <div>
                <button class="button is-small" @click="item.goods_number--">-</button>
                <input type="text" v-bind:value="item.goods_number" class="input num is-small" style="width: 30px;">
                <button class="button is-small" @click="item.goods_number++">+</button>
              </div>
            </td>
            <td>
              <b>{{Number(item.price * item.goods_number).toFixed(2)}}</b>
            </td>
            <td><span @click="dele(index)">删除</span></td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  <script src="lib/vue.global.js"></script>
  <script src="lib/axios.js"></script>
  <script>
    class toshow {
      constructor() {
        this.getarr()
      }
      getarr() {
        let api = "http://localhost:8888"
        axios(
          {
            url: api + '/goods/list?id=' + JSON.parse(sessionStorage.getItem("userdata")).id,
            method: 'get',
            headers: {
              'Content-Type': "application/x-www-form-urlencoded",
              'Authorization': sessionStorage.getItem('token')
            }
          }).then(res => {
            let goods = res.data.list
            console.log(goods);
            Vue.createApp({
              data() {
                return {
                  arr: goods
                  ,
                  dele(i) {
                    console.log(this.arr)
                    this.arr.splice(i, 1)

                  }
                }
              }
            }).mount('#app')
          }
          )

      }
    }

    new toshow()

  </script>
</body>

</html>